<template>
  <div>
    <div class="pageTitleWhole">
      <a-breadcrumb>
        <a-breadcrumb-item>
          <router-link to="/landCenter/orderAudit">订单审核</router-link>
        </a-breadcrumb-item>
        <a-breadcrumb-item>审核详情</a-breadcrumb-item>
      </a-breadcrumb>
    </div>
    <div style="margin: 24px;">
      <a-card>
        <div class="card-title hasContent">基本信息</div>
        <div class="row">
          <div class="headerContent">
            <a-descriptions :column="2" class="terDa1">
              <a-descriptions-item label="客户名称">{{detail.custName}}</a-descriptions-item>
              <a-descriptions-item label="是否加急">{{detail.isUrgent===1?'是':'否'}}</a-descriptions-item>
              <a-descriptions-item label="货名">{{detail.goodsName}}</a-descriptions-item>
              <a-descriptions-item label="结算类型">{{checkSettlementTypeName(detail.settlementType)}}</a-descriptions-item>
              <a-descriptions-item label="箱型">{{detail.containerType}}</a-descriptions-item>
              <a-descriptions-item label="发票">{{invoiceStr}}</a-descriptions-item>
              <a-descriptions-item label="箱量">
                {{detail.containerNum}}
                <a-button
                  v-if="seeContainNo"
                  type="link"
                  @click="completeBox"
                  style="line-height:21px; height:21px;"
                >查看箱号，封号</a-button>
              </a-descriptions-item>
              <a-descriptions-item label="海船公司">{{detail.seagoingShipCompanyName||'--'}}</a-descriptions-item>
            </a-descriptions>
          </div>
        </div>
      </a-card>

      <a-card>
        <div class="card-title hasContent">订单信息</div>
        <div class="row">
          <div class="headerContent">
            <a-descriptions :column="2" class="terDa1">
              <a-descriptions-item label="订单类型">{{orderTypeStr(detail.orderType)}}</a-descriptions-item>
              <a-descriptions-item label="运单号">{{detail.seagoingShipOrderCode || '--'}}</a-descriptions-item>
              <a-descriptions-item label="起运港">{{detail.startPortName || '--'}}</a-descriptions-item>
              <a-descriptions-item label="目的港">{{detail.endPortName || '--'}}</a-descriptions-item>
              <a-descriptions-item label="驳船船名">{{detail.shipName || '--'}}</a-descriptions-item>
              <a-descriptions-item label="驳船航次">{{detail.shipVoyage || '--'}}</a-descriptions-item>
              <a-descriptions-item label="海船船名">{{detail.seagoingShipName || '--'}}</a-descriptions-item>
              <a-descriptions-item label="海船航次">{{detail.seagoingShipVoyage || '--'}}</a-descriptions-item>
            </a-descriptions>
          </div>
        </div>
      </a-card>

      <a-card>
        <div class="card-title hasContent">运输信息</div>
        <div class="row">
          <div class="headerContent" style="margin:0 3%;">
            <a-descriptions :column="1">
              <a-descriptions-item label="门点信息"></a-descriptions-item>
              <a-descriptions-item>
                <a-table
                  :columns="columns"
                  :data-source="tableData"
                  size="small"
                  :pagination="false"
                  rowKey="addressId"
                />
              </a-descriptions-item>
              <a-descriptions-item label="要求送达时间">{{detail.requiredArriveTime}}</a-descriptions-item>
              <a-descriptions-item label="备注">{{detail.sellerRemark}}</a-descriptions-item>
            </a-descriptions>
          </div>
        </div>
      </a-card>

      <!-- 费用信息 -->
      <a-card>
        <div class="card-title hasContent">费用信息</div>
        <a-form-model
          ref="ruleForm"
          :model="form"
          :rules="rules"
          :label-col="labelCol"
          :wrapper-col="wrapperCol"
        >
          <a-row>
            <a-col :span="22" :offset="1">
              <a-col :span="14">
                <p style=" font-size: 16px; color: rgba(0, 0, 0, 0.85);">
                  <img :src="ys" style="margin-right:5px;" /> 应收
                </p>
                <a-form-model-item prop="receivableCustAmount" label="应收客户（元/箱）">
                  <a-input-group compact>
                    <a-input-number
                      v-model="form.receivableCustAmount"
                      :precision="2"
                      :min="0"
                      style="width: 150px"
                    ></a-input-number>
                    <a-select v-model="form.receivableCustCurrency" class="selectWidth">
                      <a-select-option value="CNY">CNY</a-select-option>
                      <a-select-option value="USD">USD</a-select-option>
                    </a-select>
                  </a-input-group>
                </a-form-model-item>
              </a-col>
            </a-col>
            <a-col :span="22" :offset="1">
              <a-col :span="14">
                <p style=" font-size: 16px; color: rgba(0, 0, 0, 0.85);">
                  <img :src="yf" style="margin-right:5px;" /> 应付
                </p>
                <a-form-model-item label="保险费(元/箱)">
                  <div
                    class="clickOnlyInput"
                    @click="openInsuranceFee"
                  >{{form.payableInsuranceAmount}}</div>
                </a-form-model-item>
              </a-col>
            </a-col>
          </a-row>
        </a-form-model>
      </a-card>

      <a-card>
        <div class="card-title hasContent">合同信息</div>
        <div class="row">
          <div class="headerContent">
            <a-descriptions :column="1">
              <a-descriptions-item>
                <viewer :images="contractPicsArr" :options="{url: 'data-x'}">
                  <template v-for="(src,index) in contractPicsArr">
                    <img
                      style="width:100px;height:100px;margin-right:10px;border:1px solid #eee"
                      :src="`${src}?x-oss-process=image/resize,h_100`"
                      :data-x="src"
                      :key="index"
                      v-if="src"
                    />
                  </template>
                </viewer>
              </a-descriptions-item>
            </a-descriptions>
          </div>
        </div>
      </a-card>

      <div class="creat_button">
        <a-form-model-item :wrapper-col="{ span: 24 }">
          <a-button
            type="primary"
            @click="passIt"
            :saveLoading="saveLoading"
            style="margin-left: 20px; float: right; margin-top:12px;"
          >通过</a-button>
          <a-button type="danger" ghost @click="refuseIt" style="float: right; margin-top:12px;">不通过</a-button>
        </a-form-model-item>
      </div>
    </div>

    <!-- 箱号，封号modal -->
    <boxInfo :visible="boxVisible" :size="boxSize" :data="boxData" @setVisible="setBoxData" />

    <!-- 保险费modal -->
    <a-modal
      :visible="payableVisible"
      title="保险费"
      :destroyOnClose="true"
      @ok="handleOk2"
      @cancel="handleCancel2"
    >
      <a-row>
        <a-col :span="24">
          <a-form-model
            ref="ruleForm2"
            :model="insuranceModalForm"
            :label-col="{span: 8}"
            :wrapper-col="{span: 14}"
          >
            <a-form-model-item label="货值（元/箱）">
              <a-input-number
                v-model="insuranceModalForm.goodsValue"
                @change="onChangeGoodsValue"
                :precision="2"
                :min="0.01"
                style="width: 100%"
              ></a-input-number>
            </a-form-model-item>
            <a-form-model-item label="选择保险公司">
              <a-select
                v-model="insuranceModalForm.payableInsuranceId"
                @change="onChangeInsuranceId"
                class="selectWidth"
              >
                <a-select-option value>请选择</a-select-option>
                <a-select-option v-for="v in custInsuranceLikeData" :key="v.custId">{{v.name}}</a-select-option>
              </a-select>
            </a-form-model-item>
            <a-form-model-item
              label="保险费率"
              style="margin: 0;"
            >{{insuranceModalForm.payableInsuranceRate || '--'}}</a-form-model-item>
            <a-form-model-item
              label="保险金额（元/箱）"
              style="margin: 0;"
            >{{insuranceModalForm.payableInsuranceAmount || '--'}}</a-form-model-item>
          </a-form-model>
        </a-col>
      </a-row>
    </a-modal>

    <!-- 不通过modal -->
    <a-modal
      title="审核不通过"
      :visible="reviewVisible"
      :destroyOnClose="true"
      @ok="handleOk3"
      @cancel="handleCancel3"
    >
      <a-row>
        <a-col :span="24">
          <a-form-model
            ref="ruleForm3"
            :model="form3"
            :rules="rules3"
            :label-col="{span: 3}"
            :wrapper-col="{span: 20}"
          >
            <p>如果判定为审核不通过，订单将打回给销售重新填写，请你填写审核不通过的原因，方便销售修改后重新提交审核。</p>
            <a-form-model-item prop="auditRemark" label="原因">
              <a-textarea v-model="form3.auditRemark" :rows="4"></a-textarea>
            </a-form-model-item>
          </a-form-model>
        </a-col>
      </a-row>
    </a-modal>
  </div>
</template>

<script>
import { mixin } from '@/common/settlement2'
import { StringifyFuc, InvoiceOptions, OrderOptions } from '../options'
import 'viewerjs/dist/viewer.css'
import ys from '@@/images/ys.png'
import yf from '@@/images/yf.png'
import boxInfo from '../boxInfoModal'
import { queryCustInsuranceDown, queryJiateOrderAuditDetail, auditOrderInfoJiate } from '@/api/landCenter'

const formMessage = `必填项不能为空`

export default {
  props: ['id'],
  mixins: [mixin],
  data () {
    const columns = [
      {
        title: '港口/门点地址',
        customRender: (text, record, index) => {
          if (record.addressType === 1) {
            return <div>{record.portName} <span class='gangIcon'>港</span></div>
          } else if (record.addressType === 2) {
            return `${record.province}${record.city}${record.area}${record.address}`
          }
        }
      },
      { title: '联系人', dataIndex: 'linkMan' },
      { title: '联系人电话号码', dataIndex: 'linkManPhone' },
      {
        title: '类型',
        dataIndex: 'opeType',
        customRender: (text, record, index) => {
          return text === 1 ? '装货' : (text === 2 ? '卸货' : '提箱')
        }
      },
      { title: '备注', dataIndex: 'remark', ellipsis: true }
    ]

    return {
      OrderOptions,
      ys,
      yf,
      labelCol: { span: 6 },
      wrapperCol: { span: 18 },
      form: {
        receivableCustAmount: '',
        receivableCustCurrency: 'CNY',
        goodsValue: '', // 货值
        payableInsuranceId: null, // 应付保险公司id
        payableInsuranceRate: '', // 应付保险公司费率
        payableInsuranceAmount: '', // 应付保险公司金额
        containerList: []
      },
      rules: {
        receivableCustAmount: [{ required: true, message: formMessage, trigger: 'blur' }]
      },
      detail: {
        contractPics: ''
      },
      columns,
      tableData: [],
      // 箱号,封号modal
      boxSize: 0,
      boxData: [],
      boxVisible: false,
      // 保险费modal
      custInsuranceLikeData: [],
      insuranceModalForm: {},
      payableVisible: false,
      saveLoading: false,
      // 审核modal
      reviewVisible: false,
      form3: {
        auditRemark: ''
      },
      rules3: {
        auditRemark: [{ required: true, message: formMessage, trigger: 'blur' }]
      }
    }
  },
  components: {
    boxInfo
  },
  computed: {
    invoiceStr () {
      const invoiceTypeStr = StringifyFuc(this.detail.invoiceType, InvoiceOptions)
      return invoiceTypeStr ? `${invoiceTypeStr} ${this.detail.taxRate}%` : '不开票'
    },
    contractPicsArr () {
      return this.detail.contractPics ? this.detail.contractPics.split(',') : []
    },
    payableInsuranceAmountComputed () {
      return this.insuranceModalForm.payableInsuranceRate >= 0 ? (this.insuranceModalForm.payableInsuranceRate * this.insuranceModalForm.goodsValue) : ''
    },
    seeContainNo () {
      return this.detail.orderType ? ~this.detail.orderType.indexOf('_IMPORTS') || this.detail.orderType === 'PURE_LAND_TRANSPORTS' : false
    }
  },
  methods: {
    orderTypeStr (key) {
      const t = this.OrderOptions.filter(v => v.key === key)[0]
      if (t) return t.title
      return '--'
    },
    completeBox () {
      this.boxVisible = true
    },
    setBoxData (value) {
      if (value) {
        this.boxData = value
        this.form.containerList = [...value]
      }
      this.boxVisible = false
    },
    // 保险费信息
    queryCustInsuranceDown () {
      queryCustInsuranceDown({ belongCompany: 'JIA_TE' }).then(rsp => {
        this.custInsuranceLikeData = rsp.data
      })
    },
    onChangeGoodsValue () {
      this.insuranceModalForm.payableInsuranceAmount = this.payableInsuranceAmountComputed
    },
    onChangeInsuranceId () {
      const target = this.custInsuranceLikeData.filter(v => v.custId === this.insuranceModalForm.payableInsuranceId)[0]
      if (target) {
        this.insuranceModalForm.payableInsuranceRate = target.insuranceRate
        this.insuranceModalForm.payableInsuranceAmount = this.payableInsuranceAmountComputed
      } else {
        this.insuranceModalForm.payableInsuranceRate = ''
        this.insuranceModalForm.payableInsuranceAmount = this.payableInsuranceAmountComputed
      }
    },
    openInsuranceFee () {
      this.queryCustInsuranceDown()
      this.insuranceModalForm = { ...this.form }
      this.payableVisible = true
    },
    handleOk2 () {
      if (this.insuranceModalForm.payableInsuranceAmount) {
        Object.assign(this.form, this.insuranceModalForm)
      } else {
        this.insuranceModalForm = {
          goodsValue: '',
          payableInsuranceId: null,
          payableInsuranceRate: '',
          payableInsuranceAmount: ''
        }
        Object.assign(this.form, this.insuranceModalForm)
      }
      this.payableVisible = false
    },
    handleCancel2 () {
      this.payableVisible = false
    },
    // 不通过
    refuseIt () {
      this.reviewVisible = true
    },
    handleOk3 () {
      this.$refs.ruleForm3.validate(valid => {
        if (valid) {
          auditOrderInfoJiate({ ...this.form, auditType: 2, orderJiateId: this.id, auditRemark: this.form3.auditRemark }).then(rsp => {
            this.$message.success('审核不通过')
            this.$router.push('/landCenter/orderAudit')
          })
          this.reviewVisible = false
        }
      })
    },
    handleCancel3 () {
      this.reviewVisible = false
    },
    passIt () {
      this.$refs.ruleForm.validate(valid => {
        if (valid) {
          auditOrderInfoJiate({ ...this.form, auditType: 1, orderJiateId: this.id }).then(rsp => {
            this.$message.success('审核通过')
            this.$router.push('/landCenter/orderAudit')
          })
        }
      })
    }
  },
  mounted () {
    this.$nextTick(() => {
      queryJiateOrderAuditDetail({ orderJiateId: this.id }).then(rsp => {
        this.detail = rsp.data
        this.tableData = rsp.data.addressList
        this.boxData = rsp.data.containerList // 编辑的
        this.form.containerList = rsp.data.containerList // 提交的
        this.boxSize = this.detail.containerNum

        let { receivableCustAmount, receivableCustCurrency, goodsValue, payableInsuranceId, payableInsuranceRate, payableInsuranceAmount } = rsp.data
        Object.assign(this.form, { receivableCustAmount, goodsValue, receivableCustCurrency, payableInsuranceId, payableInsuranceRate, payableInsuranceAmount })
      })
    })
  }
}
</script>

<style lang="less" scoped>
.ant-card {
  position: relative;
  margin-bottom: 24px;
  border: none;
  .cardEdit {
    position: absolute;
    right: 24px;
    top: 24px;
    z-index: 2;
  }
  .card-title {
    position: relative;
    padding-left: 16px;
    font-size: 18px;
    line-height: 1;
    color: #000;
    &:before {
      content: '';
      width: 5px;
      height: 18px;
      background: #1890ff;
      border-radius: 4px;
      position: absolute;
      left: 0;
      top: -1px;
    }
  }
  .hasContent {
    margin-bottom: 20px;
  }
}

.clickOnlyInput {
  width: 150px;
  height: 32px;
  padding: 4px 11px;
  color: rgba(0, 0, 0, 0.65);
  font-size: 14px;
  line-height: 1.5;
  background-color: #fff;
  background-image: none;
  border: 1px solid #d9d9d9;
  border-radius: 4px;
}
</style>
<style lang="less" scoped>
.terDa1 .ant-descriptions-item-colon {
  float: left;
  width: 40%;
  text-align: right;
}
.terDa1 .content {
  line-height: 30px !important;
}
.terDa2 .term {
  float: left;
  width: 10%;
  line-height: 30px !important;
  margin-right: 0 !important;
}
.terDa2 .content {
  line-height: 30px !important;
}
</style>
